<template>
    <div>
        <el-dialog title="请输入提取码" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="提取码" :label-width="formLabelWidth">
                    <el-input v-model="form.code" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="valieCode">确 定</el-button>
            </div>
        </el-dialog>

        <hr>

        <div v-if="wangpanFile.id">

            <div class="header">

                <div>
                    {{wangpanFile.name}}
                </div>
                <div>
                    {{shareInfo.expireTime}}过期
                </div>
                <div>
                    <el-button type="primary" @click="downloadFile">下载</el-button>
                </div>
                <div>
                    <div class="qrcode">
                        <div id="qrcode_div"></div>
                    </div>
                </div>
                <div>
                    <el-button @click="toSaveMywangpan">保存到我的网盘</el-button>
                </div>
            </div>

            <hr>

            <priview  :type="type" :name="wangpanFile.name" :url="url"></priview>


        </div>



        <el-dialog title="保存到我的网盘" :visible.sync="dialogFormVisibleMoveFlag">
            <el-button v-if="currentPidMove!=-1" @click="goBackMove">返回上一级</el-button>
            <div>
                <el-table
                        :data="toMovetableData"
                        style="width: 100%">
                    <el-table-column
                            label="名称">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goNextMoveFile(scope.row.id)">{{scope.row.name}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveToDir">保存到此</el-button>
            </div>
        </el-dialog>



    </div>
</template>

<script>

    import QRcode from 'qrcodejs2'
    import priview from './priview'
    import {getQueryString} from "@/assets/js/util.js"
    export default {
        name: "share",
        components:{
            priview
        },
        data(){
            return {
                sid:"",
                form:{
                    code:""
                },
                dialogFormVisible: false,
                formLabelWidth: '120px',
                shareInfo:{},
                wangpanFile:{},
                type:"",
                url:"",


                user:{},

                dialogFormVisibleMoveFlag:false,
                toMovetableData:[],
                currentPidMove:-1,
                pidsMove:[-1],

            }
        },
        watch:{
        },
        methods:{
            saveToDir(){
                let obj = JSON.parse(JSON.stringify(this.wangpanFile));
                obj.id = "";
                obj.uid = this.user.id
                obj.pid = this.currentPidMove

                this.axios.post(`/wangpanfile/wangpan-file/add`,obj).then(res=>{
                    this.$message.success("保存成功")
                    this.toMovetableData = []
                    this.currentPidMove = -1;
                    this.pidsMove = [-1];
                    this.dialogFormVisibleMoveFlag = false
                })
            },
            goBackMove(){
                this.pidsMove.splice(this.pidsMove.length-1);//移除最后一位，
                this.currentPidMove = this.pidsMove[this.pidsMove.length-1];//设置上一级的pid
                this.initWangpanListDataMove();
            },
            goNextMoveFile(id){
                this.currentPidMove = id;//设置当前页面的pid
                this.pidsMove.push(id);//存储到文件路径集合
                this.initWangpanListDataMove();
            },
            toSaveMywangpan(){
                let user = localStorage.getItem("wangpan_user");
                if(!user){
                    this.$message.error("请先去登录,再来保存吧")
                    setTimeout(()=>{
                        this.$router.push("/")
                    },1500)
                }else{
                    this.user = JSON.parse(user);


                    this.initWangpanListDataMove();
                    this.dialogFormVisibleMoveFlag = true

                }
            },
            initWangpanListDataMove(){
                this.axios.post(`/wangpanfile/wangpan-file/findFileListByUid?type=1&uid=${this.user.id}&pid=${this.currentPidMove}`).then(res=>{
                    this.toMovetableData = res.data.data;
                })
            },
            initQrCode(){
                var qrcode_div = document.getElementById("qrcode_div")
                qrcode_div.innerHTML = "";

                //创建图片，插入id为qrcode的div元素中
                var div = document.createElement('div');
                div.id = 'qrCodeIco';
                var img = document.createElement('img');
                img.id = 'qrCodeImg';
                img.src = require("@/assets/logo.png");
                //将img插入到div
                div.appendChild(img);
                qrcode_div.appendChild(div);
                var qrcode = new QRcode(qrcode_div, {
                    width : 200,
                    height : 200
                });
                qrcode.makeCode(location.href);
            },
            downloadFile(){
                window.open(this.url)
            },
            initWangPanFile(){
                this.axios.post("/wangpanfile/wangpan-file/findById?id="+this.shareInfo.fid).then(res=>{
                    this.wangpanFile = res.data;
                    this.url = "http://192.168.0.112:10010/wangpanfile/file/"+this.wangpanFile.url;
                    let suffix = this.wangpanFile.suffix;
                    if(suffix=="png"||suffix=="jpg"){
                        this.type = "img";
                    }else if(suffix=="mp3"){
                        this.type = "audio";
                    }else if(suffix=="mp4"){
                        this.type = "video";
                    }else if(suffix=="txt"){
                        this.type = "txt";
                        this.url = "http://192.168.0.112:10010/wangpanfile/wangpan-file/readtxt?name="+this.wangpanFile.url;
                    }else{
                        this.type = "other";
                    }
                    setTimeout(()=>{
                        this.initQrCode();
                    },200)
                })
            },
            valieCode(){
                this.axios.post("/wangpanshare/share-info/validCode?sid="+this.sid+"&code="+this.form.code).then(res=>{
                    if(res.data.code==1){//code正确
                        this.shareInfo = res.data.data;
                        this.$message.success("code正确，正在加载文件")
                        this.dialogFormVisible = false;


                        this.initWangPanFile();
                    }else{//code有误
                        this.$message.error(res.data.message);

                    }
                })
            },
            initData(){

                this.axios.post("/wangpanshare/share-info/validInfo?sid="+this.sid).then(res=>{
                    if(res.data.code==1){//链接有效
                        this.dialogFormVisible = true;
                    }else{//链接有误
                        this.$message.error(res.data.message);

                    }
                })


            }

        },
        created(){
            this.sid=getQueryString("sid")
            this.initData()
        }
    }
</script>

<style scoped>

</style>
